<template lang="pug">
.cp-product-risk-column
  el-dialog.risk-col-pop(
    title="列表设置",
    :visible="visible",
    @close="closeDialog",
    width="480px")
    el-table.risk-column-table(
      :data="tableData",
      v-loading="loading",
      height="400px",
      row-key="prop",
      ref="table",
      @selection-change="handleSelectionChange",
      border,
      fit)
      el-table-column(type="selection", label="显示")
      el-table-column(show-overflow-tooltip, prop="label", label="字段名称")
    .dialog-footer(slot="footer")
      el-button(type="primary", plain, @click="closeDialog") 取消
      el-button(type="primary", @click="emitData") 保存
</template>

<script>
import Sortable from 'sortablejs';
import ProductData from '@/data/product';

export default {
  name: 'productriskcolumn',
  props: {
    visible: Boolean,
    data: Array
  },
  data() {
    return {
      loading: true,
      tableData: [
        { prop: 'id', label: 'RISK ID' },
        { prop: 'tag', label: '标签' },
        { prop: 'feature', label: '功能' },
        { prop: 'harm', label: '危害' },
        { prop: 'expected', label: '可预见的事件序列' },
        { prop: 'dangerous', label: '危险处境' },
        { prop: 'damage', label: '可能引起的损害' },
        { prop: 'effect', label: '影响' },
        { prop: 'prevSeverity', label: '实施措施之前严重程度' },
        { prop: 'prevProbability', label: '实施措施之前出现概率' },
        { prop: 'prevRange', label: '实施措施之前风险范围' },
        { prop: 'measureType', label: '措施类型' },
        { prop: 'riskReqId', label: '风险需求ID' },
        { prop: 'measure', label: '措施' },
        { prop: 'laveSeverity', label: '剩余风险评估严重程度' },
        { prop: 'laveProbability', label: '剩余风险评估出现概率' },
        { prop: 'laveRange', label: '剩余风险评估风险范围' },
        { prop: 'module', label: '下分模块' },
        { prop: 'status', label: '状态' }
      ],
      selectData: []
    };
  },
  watch: {
    data(newData) {
      this.setChecked(newData);
    }
  },
  created() {
    this.loadAllColumn();
  },
  mounted() {
    // 设置选中
    this.setChecked(this.data);
  },
  methods: {
    setChecked(newData = []) {
      if (this.$refs.table) {
        // 清除选择
        this.$refs.table.clearSelection();
        this.$nextTick(() => {
          for (let j = 0; j < newData.length; j++) {
            // 设置选中
            this.$refs.table.toggleRowSelection(newData[j], true);
          }
        });
      } else {
        setTimeout(() => {
          this.setChecked(newData);
        }, 40);
      }
    },
    // 获取所有选项
    loadAllColumn() {
      this.tableData = ProductData.columnList;
      this.loading = false;
      this.$nextTick(() => {
        this.setSort();
      });
    },
    // 获取选中项
    handleSelectionChange(val) {
      this.selectData = val;
    },
    // 确定选择
    emitData() {
      if (this.selectData.length) {
        const data = [];
        this.tableData.forEach((item) => {
          const flag = this.selectData.find(ele => ele.prop === item.prop);
          if (flag) {
            data.push(item);
          }
        });
        this.$emit('submit', data);
      } else {
        this.$message.info('请选择展示项');
      }
    },
    // 关闭、取消
    closeDialog() {
      this.$emit('close');
    },
    // 设置拖拽
    setSort() {
      const el = document.querySelectorAll('.risk-column-table > .el-table__body-wrapper > table > tbody')[0];
      if (el) {
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
          setData: (dataTransfer) => {
            dataTransfer.setData('Text', '');
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          },
          onEnd: (evt) => {
            const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
            this.tableData.splice(evt.newIndex, 0, targetRow);
          }
        });
      } else {
        setTimeout(() => {
          this.setSort();
        }, 40);
      }
    }
  },
};
</script>

<style lang="sass">
$HEIGHT: 40px
$BORDERCOLOR: #dcdfe6
.cp-product-risk-column
  .risk-col-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 16px
    .el-dialog__footer
      padding-top: 0
      text-align: center
      .el-button
        width: 80px
  .el-table
    th, td
      text-align: center
  .icon-act
    font-size: 16px
    font-weight: 500
    cursor: pointer
    margin-left: 3px
    margin-right: 3px
    &:hover
      color: #5D9BFB
  .sortable-ghost
    opacity: .8;
    color: #fff!important;
    background: #5D9BFB!important;
</style>
